<template>
  <div class="home_activity_rigth">
    <div>
      <span
        class="btn item heat_btn2"
        v-for="item in activeList"
        :key="item.id"
        v-click-move
        @click="handleClick(item)"
      >
        <div
          v-if="item.tip"
          class="tips bounce"
          style="background-color: red"
        ></div>
        <div class="imgBg">
          <NuxtImg :src="item.img" />
        </div>
        <span class="logoTitle">{{ item.title }}</span></span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("home");
const activeList = reactive([
  {
    id: 1,
    img: "/images/home/activity/Tesouro.png",
    title: lang.tesouro,
    tip: true,
    routeName: "activity-tesouro",
  },
  {
    id: 2,
    img: "/images/home/activity/Slot.png",
    title: lang.slot,
    tip: false,
    routeName: "activity-slot",
  },
  {
    id: 3,
    img: "/images/home/activity/Agente.png",
    title: lang.agente,
    tip: false,
    routeName: "activity-agente",
  },
  {
    id: 4,
    img: "/images/home/activity/Premios.png",
    title: lang.convite,
    tip: false,
    routeName: "ranking-treasure-chest",
  },
  {
    id: 5,
    img: "/images/home/activity/Cupom.png",
    title: lang.checkIn,
    tip: false,
    routeName: "activity-checkin",
  },
  {
    id: 6,
    img: "/images/home/activity/VIP.png",
    title: lang.vip,
    tip: false,
    routeName: "activity-vip",
  },
]);

const userStore = useUserStore();
function handleClick(item: any) {
  if (userStore.isLogin) {
    if (item.routeName) {
      navigateTo({ name: item.routeName });
    } else {
      showNotify({ type: "success", message: "已登录，此处可前往活动页面" });
    }
  } else {
    userStore.changeShowLogin(true);
  }
}
</script>

<style scoped lang="scss">
.heat_btn2 {
  transition: all 0.2s ease-in-out;
}

.home_activity_rigth {
  display: grid;
  width: 100%;
  height: 2rem;
  gap: 0.3rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 0 0.24rem;
}

.home_activity_rigth div {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
}

.home_activity_rigth div .item {
  width: 1.5rem;
  height: 1.8rem;
  border-radius: 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("/images/home/activity/Button_A_Def.png");
  background-size: 100% 100%;
}

.btn {
  cursor: pointer;
}

.home_activity_rigth div .item .tips {
  position: absolute;
  right: 0.1rem;
  top: -0.1rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.26rem;
}

@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.bounce {
  opacity: 1;
  transform: scale(1);
  animation: bounce 0.6s ease-in-out infinite;
}

.home_activity_rigth div .imgBg {
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home_activity_rigth div img {
  width: 1.2rem;
}

.home_activity_rigth div .logoTitle {
  font-size: var(--font-size2);
  color: #fff;
  white-space: nowrap;
}
</style>
